<template>
  <view style="width: 100%;height: 100vh; display: flex; flex-direction: column;">
    <view>
      <view class="pop__conter">
        <view class="pop__conter--phone">
          <view class="pop__conter--phone--text">
            <view class="pop__conter--phone-label">
              手机号
              <text>*</text>
            </view>
            <input
              :placeholder="phoneForm.tips || '请输入手机号'"
              style="margin-left:40rpx"
              :value="userRegisterForm.phone"
              @blur="onPhoneBlur"
              @input="onPhoneChange"
            >
          </view>
          <view
            @tap="onSendCode"
            :class="'pop__conter--phone--code ' + (formCode.disabled && 'phone__code--none')"
          >
            {{formCode.buttonName}}
          </view>
        </view>
        <view class="pop__conter--phone">
          <view class="pop__conter--phone--text">
            <view class="pop__conter--phone-label">
              验证码
              <text>*</text>
            </view>
            <input
              :value="userRegisterForm.code"
              @input="onCodeChange"
              placeholder="请输入验证码"
              style="margin-left:40rpx"
            >
          </view>
        </view>
        <view
          v-for="(item, index) in memberRegisterFormVos"
          :key="index"
          class="pop__conter--phone"
        >
          <view class="pop__conter--phone--text">
            <view class="pop__conter--phone-label">
              {{item.formName}}
              <text>{{item.isRequired == 1 ? '*' : ''}}</text>
            </view>
            <input
              :placeholder="item.tips"
              style="margin-left:40rpx"
              :data-index="index"
              :value="item.value"
              @input="onMemberRegisterFormVosChange"
            >
          </view>
        </view>
      </view>
    </view>
    <view style="display:flex;justify-content:center; position: absolute; bottom: 40rpx;width: 100%;">
      <view
        class="pop__next"
        @tap="onPassMember"
      >保存并开通会员</view>
    </view>
  </view>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import {
  getRegisterForm,
  sendCode,
  updateRegisterData,
} from "@/api/modules/member";
@Component
export default class MemberInfo extends Vue {
    phoneForm:any={}
    memberRegisterFormVos:Array<any>=[
      {
        id: null,
        formId: "",
        value: "",
        formName: "",
        formPattern: 1,
        isRequired: null,
        tips: "",
      },
    ] // 注册表单
    formCode:any= {
      buttonName: "获取验证码",
      isDisabled: false,
      time: 60,
    }
    userRegisterForm:any={
      phone: null,
      code: null,
    }
    options:any={}
onLoad(options) {
    getRegisterForm(null).then(data => {
      if (data) {
        // data列表每个增加一个value字段方便绑定(原本没value不方便)
        data.forEach(element => {
          element.value = "";
        });
        this.setData({
          phoneForm: data.filter(v => v.formPattern + "" === "3")[0],
          memberRegisterFormVos: data.filter(
            v => v.formId !== 1 && v.formName !== "手机号",
          ),
        });
      }
    }).catch(err=>{
        this.$Popup.toast(err)
    })
    this.options=options
  }
    /**
   * 填写手机号码
   */
  fillPhone() {
    this.setData({ memShow: true });
  }
    onPassMember() {
    const { phone, code } = this.userRegisterForm;
    let cusFormPass = true;
    if (!phone) {
      this.$Popup.alert({ content: "请填写手机号" });
      cusFormPass = false;
    }
    if (!code) {
      this.$Popup.alert({ content: "请填写验证码" });
      cusFormPass = false;
    }
    this.memberRegisterFormVos.forEach(memberRegisterForm => {
      if (memberRegisterForm.isRequired === 1) {
        const pat = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        switch (memberRegisterForm.formPattern) {
          // 身份证校验
          case 1:
            if (!pat.test(memberRegisterForm.value)) {
              this.$Popup.alert({ content: "身份证格式错误" });
              cusFormPass = false;
            }
            break;
          // 必填项校验
          case 2:
            if (!memberRegisterForm.value) {
              this.$Popup.$alert({ content: "请输入完整信息" });
              cusFormPass = false;
            }
            break;
        }
      }
    });
    // 未通过校验 终止表单提交
    if (!cusFormPass) return;
    const formExdDto = this.memberRegisterFormVos.map(
      memberRegisterForm => {
        return {
          id: memberRegisterForm.id,
          formId: memberRegisterForm.formId,
          value: memberRegisterForm.value,
          formName: memberRegisterForm.formName,
        };
      },
    );
    const phoneExdDto = {
      id: this.phoneForm.id,
      formId: this.phoneForm.formId,
      value: phone,
      formName: "手机号",
    }
    updateRegisterData({
      phone,
      code,
      formExdDto:[...formExdDto, phoneExdDto],
    })
      .then(() => {
        this.setData({ openFlag: true, userInfoShow: false });
        uni.navigateTo({
          url: `/subcontract/pages/memberVip/memberVip?cardId=${this.options.cardId}`,
        });
      })
      .catch(res => {
        this.$Popup.toast(res);
      });
    return null;
  }
    // 号码校验
  validPhone(value, noTip?) {
    if (!value) {
      !noTip && this.$Popup.alert({ content: "请输入电话号码" });
    } else if (!this.isvalidPhone(value)) {
      !noTip && this.$Popup.$alert({ content: "请输入正确的11位手机号码" });
    } else {
      return true;
    }
    return false;
  }
    // 判断是否为有效手机号
  isvalidPhone(str) {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    return reg.test(str);
  }

  onPhoneBlur(e) {
    this.validPhone(e.detail.value);
  }

  onPhoneChange(e) {
    const userRegisterForm: any = this.userRegisterForm;
    userRegisterForm.phone = e.detail.value;
    this.setData({ userRegisterForm });
  }
    onSendCode() {
    const phone = this.userRegisterForm.phone;
    let timer: any = null;
    if (this.validPhone(phone) && !this.formCode.isDisabled) {
      const formCode = this.formCode;
      formCode.isDisabled = true;
      this.setData({
        formCode,
      });
      timer = setInterval(() => {
        formCode.time -= 1;
        formCode.buttonName = `${formCode.time}秒后重新发送`;
        if (formCode.time === 0) {
          formCode.buttonName = "重新发送";
          formCode.isDisabled = false;
          formCode.time = 60;
          this.setData({ formCode });
          clearInterval(timer);
        } else {
          this.setData({ formCode });
        }
      }, 1000);
      sendCode({
        phone,
      }).catch(err => {
        wx.showToast({
          title: err || "发送失败，请重试",
          icon: "none",
          duration: 2000,
        });
      });
    }
  }

  onCodeChange(e) {
    const userRegisterForm: any = this.userRegisterForm;
    userRegisterForm.code = e.detail.value;
    this.setData({ userRegisterForm });
  }

  onMemberRegisterFormVosChange(e) {
    const value = e.detail.value;
    const index = e.currentTarget.dataset.index;
    const memberRegisterFormVos = this.memberRegisterFormVos.map(
      (item, i) => {
        if (index === i) {
          item.value = value;
        }
        return item;
      },
    );
    if (memberRegisterFormVos.length > 0) {
      this.setData({
        memberRegisterFormVos,
      });
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin middle-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phoneAuthorize {
    position: fixed;
    width: 500rpx;
    height: 90rpx;
    background-color: #EAC67A;
    bottom: 450rpx;
    font-size: 32rpx;
    @include middle-center;
}

.phoneAnother {
    position: fixed;
    width: 500rpx;
    height: 90rpx;
    background-color: #3C3B43;
    bottom: 300rpx;
    font-size: 32rpx;
    border: 1rpx solid #EAC67A;
    color: #EAC67A;
    @include middle-center;
}

.pop {
    // height: 600rpx;
    height: 100%;
    font-size: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pop__top {
    background-color: #EDEBEC;
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    color: #9C9C9C;
}

.pop__conter {
    margin-top: 40rpx;

    &--text {
        color: #9C9C9C;
        margin-left: 40rpx;
        margin-right: 40rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #F7F5F6;
    }

    &--phone {
        color: #9C9C9C;
        margin-left: 20rpx;
        margin-right: 20rpx;
        padding-bottom: 40rpx;
        padding-top: 40rpx;
        border-bottom: 1rpx solid #F7F5F6;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.pop__conter--phone--text {
    // width: 600rpx;
    display: flex;
    align-items: center;
}

.pop__conter--phone--code {
    width: 250rpx;
    height: 50rpx;
    border-radius: 25rpx;
    border: 2rpx solid #E0C286;
    color: #E0C286;
    font-size: 28rpx;
    display: flex;
    @include middle-center;
}

.pop__next {
    width: 500rpx;
    height: 80rpx;
    background-color: #DAB46B;
    color: white;
    border-radius: 40rpx;
    @include middle-center;
}

.topUser {
    background-color: #3E3D45;
    padding-top: 20rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #fff;

    &__left {
        display: flex;
        align-items: center;

        &--phone {
            margin-left: 20rpx;
        }
    }

    &__right {
        display: flex;
        align-items: center;
    }
}


.descConter {
    width: 700rpx;
    background-color: #FFF6E5;
    border-radius: 15rpx;
    padding-bottom: 40rpx;
}

.descConter__top {
    padding-top: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    // background: linear-gradient(to right, #63583A, #AC941F);
    background-clip: text;
    color: transparent;
    display: flex;
    justify-content: center;

    &--icon {
        display: flex;
        justify-content: flex-end;
        margin-top: -40rpx;
        margin-right: 20rpx;
    }
}

.descConter__conter {
    margin-left: 40rpx;
    margin-top: 20rpx;
    font-size: 26rpx;
    margin-right: 40rpx;
    &__title {
        line-height: 35rpx;
        >text {
            display: inline-block;
            width: 35rpx;
            height: 35rpx;
            text-align: center;
            line-height: 35rpx;
            border-radius: 35rpx;
            background-color: rgba(235, 200, 98, 1);
        }
    }
    &_con {
        font-size: 24rpx;
        color: #666;
    }
}

.imageContainer_Wrap {
    width: 100%;
    height: 300rpx;
    margin-bottom: 100rpx;
    position: relative;
    background-color: #3E3D45;
}

.imageContainer {
    width: 100%;
    height: 400rpx;
    top: 14rpx;
    position: absolute;
    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 50rpx;
        background-color: #fff;
        position: absolute;
        bottom: 0;
    }
}

.imageContainer__swiperItem {
    height: 350rpx;
}

.imageContainer__swiperItem__itemImg, .imageContainer__swiperItem__content {
    position: absolute;
    width: 100%;
    height: 230rpx;
    border-radius: 15rpx;
    z-index: 5;
    opacity: 0.7;
    top: 13%;
}

.imageContainer__swiperItem__itemImg--active, .imageContainer__swiperItem__content__active {
    opacity: 1;
    z-index: 10;
    height: 310rpx;
    top: 7%;
    transition: all .2s ease-in 0s;
}

.privilege {
    margin-top: 10rpx;
    padding: 20rpx;
}

.privilege__sign {
    width: 12rpx;
    height: 40rpx;
    background-color: #E1B56A;
    margin-right: 20rpx;
}

.privilege__conter {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10rpx;
}

.privilege__conter--list {
    width: 25%;
    margin-bottom: 10rpx;
    margin-top: 10rpx;
    flex-wrap: wrap;
    font-size: 24rpx;
    display: flex;
    justify-content: center;

    .privilege__conter--list--item {
        width: 100rpx;
        height: 100rpx;
        // background-color: #FFFBF0;
        border-radius: 100%;
        @include middle-center;
    }
}

.privilege__desc {
    padding: 20rpx;
    margin: 20rpx;
    border: 1rpx solid #EFEFEF;
    font-size: 26rpx;
}

.opening {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: white;
    background: linear-gradient(to right, #EBCC89, #B4893B);
    @include middle-center;
}

.payConter {
    height: 640rpx;
    padding: 20rpx;
}

.payConter__top {
    font-size: 34rpx;
    display: flex;
    align-items: center;
}

.payConter__num {
    padding: 60rpx;
    font-size: 80rpx;
    @include middle-center;
}

.payConter__openingMode {
    font-size: 32rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    color: #666666;
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0;
}

.payConter__btn {
    margin-top: 80rpx;
    width: 450rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background-color: #FE4E63;
    color: white;
    font-size: 30rpx;
    box-shadow: 0px 0px 40px #FEDBDF;
    @include middle-center;
    &-no {
        background-color: #aaa;
    }
}

.congratulate {
    width: 600rpx;
    height: 650rpx;

    &__text {
        margin-top: 40rpx;
        font-size: 36rpx;
        display: flex;
        justify-content: center;
    }

    &__img {
        margin-top: 40rpx;
        display: flex;
        justify-content: center;
    }
}

.congratulate__sure {
    margin-top: 80rpx;
    display: flex;
    justify-content: center;

    &--btn {
        width: 400rpx;
        height: 60rpx;
        border-radius: 50rpx;
        background: linear-gradient(to right, #EBCC89, #B4893B);
        color: white;
        font-size: 28rpx;
        @include middle-center;
    }
}

.imageContainer__swiperItem__content {
    z-index: 100;
    padding:40rpx 32rpx;
    color:#fff;
}

.good-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24rpx;
}

.good-list-item {
    width: 49%;
    height: 500rpx;
    margin-bottom: 14rpx;
    position: relative;
    >image {
        width: 100%;
        background-color: #666;
        object-fit: cover;
    }
}

.custom__drop--down {
    position: absolute;
    width: 200rpx;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    padding: 20rpx;
}

.member-item {
    margin: 15rpx 0;
    &-active {
        color: #E1B56A;
    }
}

.popup-wrap {
    .van-popup--bottom.van-popup--safe {
        height: 100%;
    }
}

.privilege-img {
    width:50rpx;
    height:50rpx;
    &-active {
        width:60rpx;
        height:60rpx;
    }
}

.imageContainer__swiperItem__paymount {
    // box-shadow: -2px 2px 2px #888888;
    font-size:30rpx;
    position:absolute;
    bottom:40rpx;
    left:32rpx;
    padding:12rpx 36rpx;
    border-radius:80rpx;
    background-color: #fff;
    color:#bbb;
    // background: linear-gradient(to right, rgb(202,191,212), rgb(138, 142,145));
}

.can__use {
    position: absolute;
    font-size: 24rpx;
    color: #999;
}

.phone__code--none {
    border: 1rpx solid #B7B7B7;
}

.good-list-item-name {
    font-size: 32rpx;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pop__conter--phone-label {
    white-space: nowrap;
    text {
        color: red;
    }
}

.topBack__member {
    // width: 90%;
    // margin-left: 5%;
    width:400rpx;
    height:200rpx;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 20rpx;
    background-size:100% 100%;
    color: white;
    font-size: 30rpx;
    margin: 0 100rpx;
}

.topBack__member-level {
    margin-top: 18rpx;
    padding: 6rpx 12rpx;
    background-color: #fff;
    font-size: 26rpx;
    color: #aaa;  
    border-radius: 50rpx;
    display: inline-block;
}

.topBack__member-renew {
    float: right;
    padding: 10rpx 30rpx;
    border-radius: 50rpx;
    background: linear-gradient(to right, rgb(202,191,212), rgb(138, 142,145));
}

.topBack__member-empty {
    float: right;
    padding: 10rpx 30rpx;
    height: 60rpx;
}

.topBack__member-time {
    float: left;
    font-size: 24rpx;
    text {
        display: block;
    }
}
</style>